<div class="users-management-container">
    <div class="users-header">
        <h2><i class="fas fa-users"></i> 用户管理</h2>
        <p>管理系统用户账号、权限和组织结构</p>
    </div>

    <div class="users-toolbar">
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索用户...">
        </div>
        <div class="toolbar-actions">
            <button class="btn btn-primary" id="add-user-btn">
                <i class="fas fa-plus"></i> 添加用户
            </button>
            <button class="btn btn-default" id="import-users-btn">
                <i class="fas fa-file-import"></i> 批量导入
            </button>
            <button class="btn btn-default" id="export-users-btn">
                <i class="fas fa-file-export"></i> 导出列表
            </button>
        </div>
    </div>

    <div class="users-filter">
        <div class="filter-group">
            <label>部门:</label>
            <select>
                <option value="">全部部门</option>
                <option value="admin">行政办公室</option>
                <option value="finance">财务处</option>
                <option value="hr">人事处</option>
                <option value="it">信息中心</option>
            </select>
        </div>

        <div class="filter-group">
            <label>角色:</label>
            <select>
                <option value="">全部角色</option>
                <option value="admin">系统管理员</option>
                <option value="editor">文档编辑</option>
                <option value="reviewer">文档审核</option>
                <option value="user">普通用户</option>
            </select>
        </div>

        <div class="filter-group">
            <label>状态:</label>
            <select>
                <option value="">全部状态</option>
                <option value="active">已激活</option>
                <option value="inactive">未激活</option>
                <option value="locked">已锁定</option>
            </select>
        </div>

        <button class="btn btn-primary">筛选</button>
        <button class="btn btn-default">重置</button>
    </div>

    <div class="users-table-container">
        <table class="users-table">
            <thead>
            <tr>
                <th width="50px">
                    <input type="checkbox" id="select-all">
                </th>
                <th>用户名</th>
                <th>姓名</th>
                <th>部门</th>
                <th>角色</th>
                <th>手机号</th>
                <th>邮箱</th>
                <th>状态</th>
                <th>最后登录</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>admin</td>
                <td>张管理员</td>
                <td>信息中心</td>
                <td><span class="role-tag admin">系统管理员</span></td>
                <td>138****1234</td>
                <td>admin@gov.cn</td>
                <td><span class="status-badge active">已激活</span></td>
                <td>2023-06-15 09:23:45</td>
                <td>
                    <button class="btn-action edit"><i class="fas fa-edit"></i></button>
                    <button class="btn-action reset"><i class="fas fa-key"></i></button>
                    <button class="btn-action delete"><i class="fas fa-trash"></i></button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>user1</td>
                <td>李编辑</td>
                <td>行政办公室</td>
                <td><span class="role-tag editor">文档编辑</span></td>
                <td>139****5678</td>
                <td>user1@gov.cn</td>
                <td><span class="status-badge active">已激活</span></td>
                <td>2023-06-15 08:45:12</td>
                <td>
                    <button class="btn-action edit"><i class="fas fa-edit"></i></button>
                    <button class="btn-action reset"><i class="fas fa-key"></i></button>
                    <button class="btn-action delete"><i class="fas fa-trash"></i></button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>user2</td>
                <td>王审核</td>
                <td>人事处</td>
                <td><span class="role-tag reviewer">文档审核</span></td>
                <td>137****9012</td>
                <td>user2@gov.cn</td>
                <td><span class="status-badge locked">已锁定</span></td>
                <td>2023-06-14 14:30:22</td>
                <td>
                    <button class="btn-action edit"><i class="fas fa-edit"></i></button>
                    <button class="btn-action reset"><i class="fas fa-key"></i></button>
                    <button class="btn-action delete"><i class="fas fa-trash"></i></button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>user3</td>
                <td>赵普通</td>
                <td>财务处</td>
                <td><span class="role-tag user">普通用户</span></td>
                <td>136****3456</td>
                <td>user3@gov.cn</td>
                <td><span class="status-badge inactive">未激活</span></td>
                <td>-</td>
                <td>
                    <button class="btn-action edit"><i class="fas fa-edit"></i></button>
                    <button class="btn-action reset"><i class="fas fa-key"></i></button>
                    <button class="btn-action delete"><i class="fas fa-trash"></i></button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="table-footer">
            <div class="batch-actions">
                <select>
                    <option value="">批量操作</option>
                    <option value="activate">激活账号</option>
                    <option value="lock">锁定账号</option>
                    <option value="reset-pwd">重置密码</option>
                    <option value="delete">删除账号</option>
                </select>
                <button class="btn btn-default">应用</button>
            </div>

            <div class="pagination">
                <span class="total">共 25 条记录</span>
                <select class="page-size">
                    <option value="10">10 条/页</option>
                    <option value="20" selected>20 条/页</option>
                    <option value="50">50 条/页</option>
                </select>
                <button class="btn-page" disabled><i class="fas fa-angle-left"></i></button>
                <span class="current-page">1</span>
                <button class="btn-page"><i class="fas fa-angle-right"></i></button>
            </div>
        </div>
    </div>

    <!-- 添加/编辑用户模态框 -->
    <div class="user-modal" id="user-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-title">添加用户</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <form id="user-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="username">用户名 <span class="required">*</span></label>
                            <input type="text" id="username" required>
                        </div>
                        <div class="form-group">
                            <label for="password">密码 <span class="required">*</span></label>
                            <input type="password" id="password" required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="realname">姓名 <span class="required">*</span></label>
                            <input type="text" id="realname" required>
                        </div>
                        <div class="form-group">
                            <label for="gender">性别</label>
                            <select id="gender">
                                <option value="male">男</option>
                                <option value="female">女</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="department">部门 <span class="required">*</span></label>
                            <select id="department" required>
                                <option value="">请选择部门</option>
                                <option value="admin">行政办公室</option>
                                <option value="finance">财务处</option>
                                <option value="hr">人事处</option>
                                <option value="it">信息中心</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="role">角色 <span class="required">*</span></label>
                            <select id="role" required>
                                <option value="">请选择角色</option>
                                <option value="admin">系统管理员</option>
                                <option value="editor">文档编辑</option>
                                <option value="reviewer">文档审核</option>
                                <option value="user">普通用户</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="phone">手机号</label>
                            <input type="tel" id="phone">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" id="email">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="status">账号状态</label>
                        <select id="status">
                            <option value="active">已激活</option>
                            <option value="inactive">未激活</option>
                            <option value="locked">已锁定</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="remark">备注</label>
                        <textarea id="remark" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default modal-cancel">取消</button>
                <button class="btn btn-primary modal-confirm">确认</button>
            </div>
        </div>
    </div>
</div>

<style>

</style>

<script>

</script>